{% extends "base.html" %}
{% block content %}
    <h2>编辑用户</h2>
    <form method="POST">
        <div class="form-group">
            <label>姓名：</label>
            <input type="text" name="name" value="{{ user.name }}" required>
        </div>
        <div class="form-group">
            <label>邮箱：</label>
            <input type="email" name="email" value="{{ user.email }}" required>
        </div>
        <div class="form-group">
            <label>年龄：</label>
            <input type="number" name="age" value="{{ user.age }}" required>
        </div>
        <button type="submit">保存修改</button>
    </form>
    <script>
        // 保存原始邮箱，用于比较
        const originalEmail = "{{ user.email }}";
        let isEmailValid = true;

        // 邮箱失去焦点时验证
        function validateEmail(input) {
            const email = input.value.trim();
            const errorSpan = document.getElementById('email-error');

            // 如果邮箱未修改，标记为有效
            if (email === originalEmail) {
                isEmailValid = true;
                errorSpan.style.display = 'none';
                return;
            }

            // 简单的前端验证（实际项目中建议使用后端API验证）
            // 这里仅做演示，实际项目中应该使用AJAX请求后端验证
            // 假设这个邮箱已存在
            if (email === '123451@qq.com') {
                isEmailValid = false;
                errorSpan.style.display = 'block';
            } else {
                isEmailValid = true;
                errorSpan.style.display = 'none';
            }
        }

        // 验证整个表单
        function validateForm(event) {
            const emailInput = document.getElementById('email');
            validateEmail(emailInput);

            if (!isEmailValid) {
                event.preventDefault();  // 阻止表单提交
                return false;
            }

            return true;
        }
    </script>
{% endblock %}

{% block list %}
    <!-- 如果编辑页面需要显示列表，可保留；不需要就清空，或根据需求调整 -->
    {% for user in users %}
    <!-- 这里可以简单渲染列表，或直接去掉这部分，让 base 里的 block 为空 -->
    {% endfor %}
{% endblock %}
